/* eslint-disable jsx-a11y/anchor-is-valid */
import "./moneyPlanning.css";
import React, { useState } from "react";
import { useEffect } from "react";
import axios from "axios";
import { Table, Modal, message } from "antd";
const MoneyPlanning = () => {
  const columns = [
    {
      title: "财富规划类型",
      width: 100,
      dataIndex: "name",
      fixed: "left",
    },
    {
      title: "规划时间",
      width: 150,
      dataIndex: "time",
    },
    {
      title: "操作渠道",
      dataIndex: "way",
      width: 100,
    },
    {
      title: "当前状态",
      dataIndex: "status",
      width: 100,
    },
    {
      title: "是否推送手机银行",
      dataIndex: "status",
      width: 100,
    },
    {
      title: "推送状态",
      dataIndex: "status",
      width: 100,
    },
    {
      title: "推送时间",
      dataIndex: "time",

      width: 150,
    },
    {
      title: "Action",
      fixed: "right",
      width: 100,
      render: () => (
        <div className="operation">
          <a onClick={showModal}>查看</a>
          <p
            style={{
              margin: "0 8px",
              width: "1px",
              height: "16px",
              background: "#ccc",
            }}
          ></p>

          <a
            onClick={() => {
              message.success("下载成功了喔~~");
            }}
          >
            下载报告
          </a>
        </div>
      ),
    },
  ];
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const [data, setData] = useState([]);
  useEffect(() => {
    const Fn = async () => {
      const res = await axios.get("http://localhost:1019/tableList2");
      setData(res.data);
    };
    Fn();
  }, []);
  return (
    <div className="money-planning">
      <div className="title">
        <div className="box"></div>
        <div className="words">已配置规划明细</div>
      </div>
      <div className="table">
        <Table
          columns={columns}
          dataSource={data}
          scroll={{
            x: 1500,
            y: 354,
          }}
        />
      </div>
      <Modal
        title="2024年啦"
        cancelText="取消"
        okText="确定"
        open={isModalOpen}
        onOk={() => {
          setIsModalOpen(false);
        }}
        onCancel={() => {
          setIsModalOpen(false);
        }}
        centered
      >
        <p>新年快乐鸭</p>
        <p>新年快乐鸭</p>
        <p>新年快乐鸭</p>
      </Modal>
    </div>
  );
};
export default MoneyPlanning;
